<template>
	<view class="orderDeta">
		<view class="picker">
			<view class="item" @click="picker('start')">{{startDate?startDate:"开始时间"}}</view>
			<view class="cell">-</view>
			<view class="item" @click="picker('end')">{{endDate?endDate:"结束时间"}}</view>
		</view>
		<view class="table">
			<view class="header">
				<view class="item first"></view>
				<view class="item"></view>
				<view class="item">数量</view>
			</view>
			<view class="content">
				<view class="row" v-if="cell.length">
					<view class="cell">盖雨布梯度</view>
					<view class="cell_view">
						<view class="cell_item" v-for="(item,index) in cell" :key="`cell_${index}`">
							<view class="cell_text">{{item.level}}</view>
							<view class="cell_text num">{{item.count}}</view>
						</view>
					</view>
				</view>
				<view class="row" v-for="(item,index) in list" :key="index">
					<view class="cell">{{item.title}}</view>
					<view class="cell">单价/{{item.pre_price}}</view>
					<view class="cell num">{{item.num}}</view>
				</view>
				<!-- 	<view class="row">
					<view class="cell total">总价</view>
					<view class="cell"></view>
					<view class="cell"></view>
					<view class="cell total">{{data.total_price}}</view>
				</view> -->
			</view>
		</view>
	</view>

	<uv-datetime-picker ref="pickerRef" v-model="date_value" :minDate="10" :formatter="formatter" mode="datetime"
		@confirm="confirm" />
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onReady
	} from "@dcloudio/uni-app"
	import {
		totalData
	} from '@/util/request/api.js';

	const cell = ref([]),
		list = ref([]);
	// 获取明天日期
	const getEndDate = () => {
		let date = new Date();
		let tomorrow = new Date();
		tomorrow.setDate(date.getDate() + 1);

		let end = uni.$uv.date(tomorrow.getTime(), 'yyyy-mm-dd');
		return `${end} 07:00:00`;
	}

	const pickerRef = ref(),
		date_value = ref("");

	let startDate = ref(""),
		endDate = ref("");
	let start = uni.$uv.date(new Date().getTime(), 'yyyy-mm-dd');
	startDate.value = `${start} 07:00:00`;
	endDate.value = getEndDate();

	let type = "";
	const picker = (value) => {
		type = value;
		if (type == 'start') date_value.value = new Date(startDate.value).getTime();
		if (type == 'end') date_value.value = new Date(endDate.value).getTime();
		pickerRef.value.open();
	};
	const confirm = (e) => {
		let value = uni.$uv.date(e.value, 'yyyy-mm-dd hh:MM:ss');
		if (type == 'start') startDate.value = value;
		if (type == 'end') endDate.value = value;

		getData();
	};
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		if (type === 'hour') {
			return `${value}时`
		}
		if (type === 'minute') {
			return `${value}分`
		}
		return value
	};
	const getData = async () => {
		// if (!startDate.value || !endDate.value) return;
		let res = await totalData({
			params: {
				start: startDate.value,
				end: endDate.value
			}
		});
		cell.value = res.level;
		list.value = res.price;
	};
	getData();
	onReady(() => pickerRef.value.setFormatter(formatter));
</script>

<style lang="scss" scoped>
	.orderDeta {
		min-height: calc(100vh - var(--window-top));
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;

		.picker {
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cell {
				width: 40rpx;
				text-align: center;
			}

			.item {
				flex: 1;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
				border-radius: 10rpx;
				border: 1px solid #F1F3F7;
			}
		}

		.table {
			border-radius: 10rpx;
			overflow: hidden;

			.header {
				border-left: 1rpx solid #2282FC;
				border-right: 1rpx solid #2282FC;
				box-sizing: border-box;
				background-color: #2282FC;
				display: flex;
				justify-content: space-between;

				.item {
					flex: 1;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 32rpx;
					border-left: 1rpx solid #F1F3F7;
					box-sizing: border-box;

					&.first {
						flex: 0 0 288rpx;
						border-left: none;
					}
				}
			}

			.content {
				border: 1rpx solid #F1F3F7;
				box-sizing: border-box;

				.row {
					display: flex;
					justify-content: space-between;

					&:nth-child(2n) {
						background: rgba(34, 130, 252, 0.05);
					}

					.cell_view {
						flex: 1;

						.cell_item {
							display: flex;

							&:nth-child(odd) {
								background: rgba(34, 130, 252, 0.05);
							}

							.cell_text {
								flex: 1;
								color: #333333;
								font-size: 28rpx;
								text-align: center;
								border-left: 1rpx solid #F1F3F7;
								padding: 20rpx 10rpx;
								box-sizing: border-box;

								&.num {
									font-size: 32rpx;
								}
							}
						}
					}

					.cell {
						flex: 1;
						min-height: 68rpx;
						color: #333333;
						font-size: 28rpx;
						word-break: break-all;

						border-left: 1rpx solid #F1F3F7;
						padding: 20rpx 10rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;

						&:first-child {
							flex: 0 0 288rpx;
							border-left: none;
						}

						&:nth-child(even) {
							font-weight: 400;
						}

						&.red {
							color: #FF0000;
						}

						&.total,
						&.num {
							font-size: 32rpx;
						}
					}
				}
			}
		}
	}
</style>